{% extends "base.html" %}

{% block title %}{{ document.title }} - Ruiyun Cloud{% endblock %}

{% block content %}
<div class="doc-view">
    <!-- Document Header -->
    <div class="doc-view-header">
        <a href="{{ url_for('public.index') }}" class="back-link">
            ← 返回文档列表
        </a>
        <h1 class="doc-view-title">{{ document.title }}</h1>
        <div class="doc-view-meta">
            <span class="format-badge format-{{ document.format }}">
                {% if document.format == 'markdown' %}📝 Markdown
                {% elif document.format == 'html' %}🌐 HTML
                {% else %}📄 Plain Text{% endif %}
            </span>
            <span class="doc-meta-item">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="12" cy="12" r="10"/>
                    <polyline points="12 6 12 12 16 14"/>
                </svg>
                创建: {{ document.created_at.strftime('%Y-%m-%d %H:%M') }}
            </span>
            {% if document.updated_at != document.created_at %}
            <span class="doc-meta-item">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
                </svg>
                更新: {{ document.updated_at.strftime('%Y-%m-%d %H:%M') }}
            </span>
            {% endif %}
        </div>
    </div>

    <!-- Document Content -->
    <div class="doc-view-content">
        {{ rendered_content | safe }}
    </div>

    <!-- Document Footer -->
    <div class="doc-view-footer">
        <a href="{{ url_for('public.index') }}" class="btn btn-secondary">
            ← 返回文档列表
        </a>
        {% if session.get('admin_id') %}
        <div style="display: flex; gap: 0.5rem;">
            <a href="{{ url_for('admin.edit', id=document.id) }}" class="btn btn-outline">✏️ 编辑文档</a>
            <button onclick="deleteDoc({{ document.id }}, '{{ document.title }}')" class="btn btn-outline btn-danger">🗑️ 删除文档</button>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
    /* Additional styles for rendered content */
    .doc-view-content {
        line-height: 1.8;
    }

    .doc-view-content h1,
    .doc-view-content h2,
    .doc-view-content h3,
    .doc-view-content h4,
    .doc-view-content h5,
    .doc-view-content h6 {
        margin-top: 2rem;
        margin-bottom: 1rem;
        font-weight: 600;
        line-height: 1.3;
    }

    .doc-view-content h1 { font-size: 2rem; }
    .doc-view-content h2 { font-size: 1.75rem; }
    .doc-view-content h3 { font-size: 1.5rem; }
    .doc-view-content h4 { font-size: 1.25rem; }
    .doc-view-content h5 { font-size: 1.1rem; }
    .doc-view-content h6 { font-size: 1rem; }

    .doc-view-content p {
        margin-bottom: 1rem;
    }

    .doc-view-content code {
        background: #f4f4f4;
        padding: 0.2rem 0.4rem;
        border-radius: 3px;
        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
        font-size: 0.9em;
    }

    .doc-view-content pre {
        background: #f4f4f4;
        padding: 1rem;
        border-radius: 5px;
        overflow-x: auto;
        margin: 1rem 0;
    }

    .doc-view-content pre code {
        background: none;
        padding: 0;
    }

    .doc-view-content blockquote {
        border-left: 4px solid #667eea;
        padding-left: 1rem;
        margin: 1rem 0;
        color: #555;
        font-style: italic;
    }

    .doc-view-content table {
        width: 100%;
        border-collapse: collapse;
        margin: 1rem 0;
    }

    .doc-view-content table th,
    .doc-view-content table td {
        border: 1px solid #ddd;
        padding: 0.75rem;
        text-align: left;
    }

    .doc-view-content table th {
        background: #f8f9fa;
        font-weight: 600;
    }

    .doc-view-content ul,
    .doc-view-content ol {
        margin-left: 2rem;
        margin-bottom: 1rem;
    }

    .doc-view-content li {
        margin-bottom: 0.5rem;
    }

    .doc-view-content a {
        color: #667eea;
        text-decoration: none;
        border-bottom: 1px solid transparent;
        transition: border-color 0.3s;
    }

    .doc-view-content a:hover {
        border-bottom-color: #667eea;
    }

    .doc-view-content img {
        max-width: 100%;
        height: auto;
        border-radius: 5px;
        margin: 1rem 0;
    }

    .btn-danger {
        background: #f5576c;
        color: white;
        border: 1px solid #f5576c;
    }

    .btn-danger:hover {
        background: #e04455;
        border-color: #e04455;
    }
</style>
{% endblock %}

{% block extra_js %}
<script>
    function deleteDoc(docId, docTitle) {
        if (confirm(`确定要删除文档《${docTitle}》吗？\n\n此操作不可撤销！删除后将返回首页。`)) {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = `/admin/delete/${docId}`;
            document.body.appendChild(form);
            form.submit();
        }
    }
</script>
{% endblock %}
